<template>
    <div class="pro-wdtd ">
        <van-tabs :active="active" v-on:change="onChange" title-active-color="#00ac88" color="#00ac88">
            <van-tab title="高级会员" ></van-tab>
            <van-tab title="我的会员" ></van-tab>
        </van-tabs>

        <div class="list mt10  plr15">
            <ClList 
                :loading="loading"
                :finished="finished"
                finishedText="没有更多了"
                @load="ListMember"
                :list="list">
                <div class="plr20  bgc-fff">
                    <div class="item kitbox bb-e1e1e1  ptb12" v-for="(item, i) in list" :key="i">
                        <div class="photo pt5">
                            <img :src="item.avatar" alt="">
                        </div>
                        <template v-if="item.active==0">
                            <div class="flex1 pl15 pt8">
                                <div class="fs-15 c-333">{{item.nickname}}</div>
                                <div class="fs-10 c-999 pt5">{{item.create_time}}</div>
                            </div>
                            <div class="fs-14 c-4d4d4d pt8" >
                                <div class="">
                                    <van-tag color="#00ac88" round type="danger">高级会员</van-tag>
                                </div>
                                <div class="pt5 c-999 fs-13 tr">{{item.sub_amount}}人</div>
                            </div>
                        </template>
                        <template v-else="">
                            <div class="flex1 pl15 pt8">
                                <div class="fs-14 c-4d4d4d">{{item.nickname}}</div>
                                <div class="fs-10 c-999 pt5">推荐绑定时间： {{item.create_time}}</div>
                            </div>
                            <div class="fs-14 c-4d4d4d pt8" >
                                <div class=" ">
                                    <van-tag color="#00ac88" round type="danger">会员</van-tag>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </ClList>
        </div>
    </div>
</template>

<script>
// import agentApi from '@/api/api-agent'
import ClList from "@/components/ClList"
export default {
    data () {
        return {
            active: 0,
            loading: false,
            finished: false,
            pageIndex: 0,
            pageSize: 20,
            list: [{nickname: '卖猪的小火柴', create_time: '2022/06/05 14:30', sub_amount: 5, active: 0}, {nickname: '卖猪的小火柴', create_time: '2022/06/05 14:30', sub_amount: 6, active: 1}]
        }
    },
    watch: {
        
    },
    components: {
        ClList
    },
    onLoad(options){
        
    },
    mounted () {
        // this.ListMember(true)
    },
    methods: {
        ListMember(reload){
            this.loading = true
            if(reload){
                this.pageIndex = 1
                this.finished = false
            }
            agentApi.ListMember({
                layer: this.active==0? 1 : 2,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }).then(data => {
                this.loading = false
                data.result.List.forEach(v => {
                    v.active = this.active
                });
                if(reload){
                    this.list = data.result.List
                } else {
                    this.list = this.list.concat(data.result.List)
                }
                this.finished = data.result.IsLastPage
                this.pageIndex++
            })
        },
        onChange(e){
            this.active = e.mp.detail.name
            this.ListMember(true)
        }
    },
}
</script>

<style  lang="scss">
.pro-wdtd{
    .van-tab{
        background: transparent;
    }
    
    .list{
        .item{
            .photo{
                img{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    display: block;
                }
            }
        }
    }
}
</style>
